<template>
  <div class="crane-bg">
    <div class="tools" @click="toggleAnimation">
      <span v-if="!data.isShow">{{ count }}%</span>
      <el-icon v-else :size="20"><Close /></el-icon>
      <div
        ref="toTop"
        :class="{
          'tool-icon': true,
          'to-left-active': data.isShow,
          'to-left-inactive': !data.isShow
        }"
        title="返回顶部"
        @click.stop="toTopClick"
      ></div>
      <div
        :class="{
          'tool-icon': true,
          'to-top-active': data.isShow,
          'to-top-inactive': !data.isShow
        }"
        title="返回首页"
        @click.stop="
          () => {
            router.push('/');
            data.isShow = false;
          }
        "
      ></div>
      <div
        :class="{
          'tool-icon': true,
          'to-top-left-active': data.isShow,
          'to-top-left-inactive': !data.isShow
        }"
        title="打开菜单"
        @click.stop="openMenu"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Close } from '@element-plus/icons-vue';
import router from '@/router';
import useOpenMenuStore from '@/store/modules/openMenu.store.ts';

const toTop = ref();

const data = reactive({
  isShow: false
});

defineProps({
  count: {
    type: Number,
    default: 0
  }
});

const toggleAnimation = () => {
  data.isShow = !data.isShow;
};

const toTopClick = () => {
  document.getElementsByClassName('crane-main')[0].scrollTo({
    top: 0,
    behavior: 'smooth'
  });
  data.isShow = false;
};

const openMenu = () => {
  useOpenMenuStore().setMenuStatus(!useOpenMenuStore().isMenuOpen);
};
</script>

<style scoped lang="less">
.crane-bg {
  position: fixed;
  right: 45px;
  bottom: 60px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  z-index: 999999;
  background-color: var(--background-secondary);
  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.tools {
  width: 45px;
  height: 45px;
  background: linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%);
  position: relative;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--font-color);
  font-size: 15px;
}

.tool-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  position: absolute;
  box-sizing: border-box;
  background: linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%);
  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
  opacity: 0;
  z-index: 10000;
  transition:
    left 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}

.to-left-active {
  animation: toLeftActive 0.3s ease-in-out forwards;
  &::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 25px;

    box-sizing: border-box;
    background: url('../assets/rocket.png') var(--background-primary) no-repeat;
    background-size: 65% 65%;
    background-position: center;
  }
}

.to-left-inactive {
  display: none;
  animation: toLeftInactive 0.3s ease-in-out forwards;
}

.to-top-active {
  &::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 25px;

    box-sizing: border-box;
    background: url('../assets/index.png') var(--background-primary) no-repeat;
    background-size: 65% 65%;
    background-position: center;
  }
  animation: toTopActive 0.3s ease-in-out forwards;
}

.to-top-inactive {
  display: none;
  animation: toTopInactive 0.3s ease-in-out forwards;
}

.to-top-left-active {
  &::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 25px;

    box-sizing: border-box;
    background: url('../assets/menu.png') var(--background-primary) no-repeat;
    background-size: 65% 65%;
    background-position: center;
  }
  animation: toTopLeftActive 0.3s ease-in-out forwards;
}

.to-top-left-inactive {
  display: none;
  animation: toTopLeftInactive 0.3s ease-in-out forwards;
}

@keyframes toLeftActive {
  0% {
    opacity: 0;
    left: 0;
  }
  50% {
    opacity: 0.5;
    left: -50px;
  }
  100% {
    opacity: 1;
    left: -100px;
  }
}

@keyframes toLeftInactive {
  0% {
    opacity: 1;
    left: -100px;
  }
  50% {
    opacity: 0.5;
    left: -50px;
  }
  100% {
    opacity: 0;
    left: 0;
  }
}

@keyframes toTopActive {
  0% {
    opacity: 0;
    top: 0;
  }
  50% {
    opacity: 0.5;
    top: -50px;
  }
  100% {
    opacity: 1;
    top: -100px;
  }
}

@keyframes toTopInactive {
  0% {
    opacity: 1;
    top: -100px;
  }
  50% {
    opacity: 0.5;
    top: -50px;
  }
  100% {
    opacity: 0;
    top: 0;
  }
}

@keyframes toTopLeftActive {
  0% {
    opacity: 0;
    top: 0;
    left: 0;
  }
  50% {
    opacity: 0.5;
    top: -25px;
    left: -25px;
  }
  100% {
    opacity: 1;
    left: calc(sqrt(2) * -50px);
    top: calc(sqrt(2) * -50px);
  }
}

@keyframes toTopLeftInactive {
  0% {
    opacity: 1;
    left: calc(sqrt(2) * -50px);
    top: calc(sqrt(2) * -50px);
  }
  50% {
    opacity: 0.5;
    top: -25px;
    left: -25px;
  }
  100% {
    opacity: 0;
    top: 0;
    left: 0;
  }
}
</style>
